<template>
	<view class="row flex-center ">
		<!-- <image :src="lang_img" style="width: 100%;height: 100%;border-radius: 50%;" class="box-shadow" @click="selectLang"></image> -->
		<view @click="selectLang" style="border-radius: 5px;border: 1px solid #666;padding: 3px 10px;cursor: pointer;">
			{{ lang_name }}
		</view>
		<!-- <uni-data-select v-model="lang" :localdata="range" @change="change" :clear="false" :placeholder="$t('请选择')"
			:emptyText="$t('无数据')" style="width: 120px;text-align: center;"></uni-data-select> -->
		<uni-popup type="right" ref="lang">
			<scroll-view style="height:100vh;width: 240px;color: #666;padding-bottom: 20px;" class="bg-fff" scroll-y>
				<view style="line-height: 50px;margin-left: 15px;font-size: 18px;font-weight: 900;">{{ $t('语言') }}
				</view>
				<view class="pd-10">
					<!-- <view @click="changeLang(item.lang_code,item.lang_img)" class="row  pd-15 t-w border-bottom"
						style="line-height: 30px;" v-for="(item,index) in langList" :key="index">
						<view class="bg-img bg-img-cover mr-10 w-h-30 b-r-15 box-shadow"
							:style="'background:url('+ $var.apiUrl + item.lang_img +')'"></view>
						<view class="row-auto">{{ item.lang_alias }}</view>
						<view>{{ item.lang_no }}</view>
					</view> -->
					<view @click="changeLang(item)" class="row  pd-15 t-w border-bottom pointer"
						style="line-height: 30px;" v-for="(item,index) in langList" :key="index">
						<view class="bg-img bg-img-cover mr-10 w-h-30 b-r-15 box-shadow"
							:style="'background:url('+ $var.apiUrl + item.lang_img +')'"></view>
						<view class="row-auto">{{ item.lang_alias }}</view>
						<!-- <view>{{ item.lang_code }}</view> -->
					</view>
				</view>

			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		i18n,
		loadLanguageAsync
	} from '@/common/js/vueI18n.js'
	export default {
		name: "gt-btn",
		props: {
			color: {
				type: [Number, String],
				default: ''
			},
			info: {
				type: Object,
				default: function() {
					return {};
				}
			},
		},
		data() {
			return {
				range: [],
				list: [],
				listIndex: 0,
				lang: '',
				lang_name: '',
				lang_img: '',
				langList: []
			}
		},
		created() {
			this.getData();
		},
		updated() {
			this.lang = uni.getLocale();
		},
		methods: {
			getData() {
				let r = this.$fun.getCache('gtLangCache');
				console.log(r)
				if(r){
					this.setData(r);
				}else{
					this.$get({
						url: '/common/sys-lang/list',
						_this: this,
						afterFun(r, _this) {
							_this.$fun.setCache('gtLangCache',r);
							_this.setData(r);
						}
					});
				}
				
			},
			setData(r){
				this.langList = r.langList
				let range = [];
				for (let i in r.langList) {
					let row = r.langList[i];
					if (this.$var.lang == row.lang_code) {
						this.lang_img = this.$var.apiUrl + row.lang_img
						this.lang_name = row.lang_alias
					}
						range.push({
							value: row.lang_code,
							text: row.lang_alias
						});
				}
				this.range = range;
			},
			selectLang() {
				this.$refs.lang.open();
				// this.$skip.to('/lang');
			},
			change(e){
				console.log(e);
				// this.$var.lang = e
				// this.$fun.setCache('lang', e);
				// this.lang_img = this.$var.apiUrl + img
				// this.$i18n.locale = lang_code;
				// uni.setLocale(lang_code);
				// this.$refs.lang.close();
			},
			changeLang(item) {
				this.$var.lang = item.lang_code
				this.$fun.setCache('lang', item.lang_code);
				this.lang_img = this.$var.apiUrl + item.img
				this.lang_name = item.lang_alias;
				this.$i18n.locale = item.lang_code;
				uni.setLocale(item.lang_code);
				this.$refs.lang.close();
				// loadLanguageAsync(lang_code);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-scroll-view-content{
		width: 200px;
	}
</style>